{% extends 'base.html' %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-12">
        <h1>AI 知识库仪表板</h1>
        <p>智能分析和问题解决中心</p>
    </div>
</div>

<div class="row mb-4">
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="card-title">问题分析</h3>
                        <p class="card-text">AI驱动的问题智能分析</p>
                    </div>
                    <i class="fas fa-search fa-3x"></i>
                </div>
                <div class="mt-4">
                    <a href="{{ url_for('main.ai_search') }}" class="btn btn-light">开始搜索</a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="card-title">解决方案</h3>
                        <p class="card-text">智能推荐解决方案</p>
                    </div>
                    <i class="fas fa-lightbulb fa-3x"></i>
                </div>
                <div class="mt-4">
                    <a href="{{ url_for('main.list_issues') }}" class="btn btn-light">浏览问题</a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="card-title">知识管理</h3>
                        <p class="card-text">组织和管理知识库</p>
                    </div>
                    <i class="fas fa-book fa-3x"></i>
                </div>
                <div class="mt-4">
                    <a href="#" class="btn btn-light">管理知识</a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="card-title">统计分析</h3>
                        <p class="card-text">AI使用情况统计</p>
                    </div>
                    <i class="fas fa-chart-bar fa-3x"></i>
                </div>
                <div class="mt-4">
                    <a href="#" class="btn btn-light">查看统计</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">
                <h5>AI搜索热门话题</h5>
            </div>
            <div class="card-body">
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex justify-content-between">
                            <span>系统性能优化</span>
                            <span class="badge badge-primary">128次搜索</span>
                        </div>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex justify-content-between">
                            <span>数据库连接问题</span>
                            <span class="badge badge-primary">95次搜索</span>
                        </div>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex justify-content-between">
                            <span>用户认证错误</span>
                            <span class="badge badge-primary">83次搜索</span>
                        </div>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex justify-content-between">
                            <span>文件上传失败</span>
                            <span class="badge badge-primary">76次搜索</span>
                        </div>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex justify-content-between">
                            <span>移动端适配问题</span>
                            <span class="badge badge-primary">64次搜索</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">
                <h5>最近解决的问题</h5>
            </div>
            <div class="card-body">
                <div class="list-group">
                    {% for issue in recent_solved_issues %}
                    <a href="{{ url_for('main.view_issue', issue_id=issue.id) }}" class="list-group-item list-group-item-action">
                        <div class="d-flex justify-content-between">
                            <h6 class="mb-1">#{{ issue.id }} {{ issue.title }}</h6>
                            <span class="badge badge-success">已解决</span>
                        </div>
                        <p class="mb-1 text-sm text-muted">{{ issue.description[:100] }}...</p>
                        <small class="text-muted">解决于: {{ issue.updated_at.strftime('%Y-%m-%d %H:%M') }}</small>
                    </a>
                    {% endfor %}
                    {% if not recent_solved_issues %}
                    <div class="text-center py-4">
                        <p>暂无最近解决的问题</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header">
        <h5>AI助手功能介绍</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-4">
                <div class="text-center">
                    <i class="fas fa-search fa-5x text-primary mb-3"></i>
                    <h6>智能搜索</h6>
                    <p class="text-sm text-muted">使用AI技术快速找到相关问题和解决方案，支持语义理解。</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-center">
                    <i class="fas fa-robot fa-5x text-success mb-3"></i>
                    <h6>自动分析</h6>
                    <p class="text-sm text-muted">自动分析问题内容，提取关键信息，提供可能的解决方案。</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-center">
                    <i class="fas fa-brain fa-5x text-info mb-3"></i>
                    <h6>知识推荐</h6>
                    <p class="text-sm text-muted">根据问题内容推荐相关的知识文章、文档和历史解决方案。</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 使用纯JavaScript实现，移除jQuery依赖

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有卡片元素
    const cards = document.querySelectorAll('.card');
    
    // 添加动画效果
    cards.forEach(function(card) {
        // 鼠标悬停效果
        card.addEventListener('mouseenter', function() {
            this.style.transition = 'margin-top 0.3s ease';
            this.style.marginTop = '-5px';
        });
        
        // 鼠标离开效果
        card.addEventListener('mouseleave', function() {
            this.style.transition = 'margin-top 0.3s ease';
            this.style.marginTop = '0px';
        });
    });
    
    // 模拟数据加载
    function loadRecentSolvedIssues() {
        // 在实际项目中，这里应该从服务器获取数据
        const hasRecentIssues = Math.random() > 0.3; // 随机模拟有没有最近解决的问题
        
        if (!hasRecentIssues) {
            const listGroups = document.querySelectorAll('.list-group');
            listGroups.forEach(function(listGroup) {
                // 检查是否包含链接到问题的元素
                const hasIssueLinks = Array.from(listGroup.children).some(function(child) {
                    return child.tagName === 'A' && child.href.includes('/issues/');
                });
                
                if (hasIssueLinks) {
                    listGroup.innerHTML = '<div class="text-center py-4"><p>暂无最近解决的问题</p></div>';
                }
            });
        }
    }
    
    // 初始化页面
    loadRecentSolvedIssues();
});
</script>
{% endblock %}